<template>
  <j-modal
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :title="title"
    :visible="visible"
    :width="900"
    switchFullscreen
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-model
          ref="dynamicValidateForm"
          v-bind="formItemLayoutWithOutLabel"
          :model="dynamicValidateForm"
        >
          <a-form-model-item
            v-for="(domain, index) in dynamicValidateForm.domains"
            :key="domain.key"
            v-bind="index === 0 ? formItemLayout : {}"
            :label="index === 0 ? '补充协议' : ''"
            :prop="'domains.' + index + '.value'"
            :rules="{
              required: true,
              message: '补充协议不能为空',
              trigger: 'blur',
            }"
          >
            <a-textarea
              v-model="domain.value"
              :auto-size="{ minRows: 10 }"
              placeholder="请输入补充协议"
              style="width: 90%; margin-right: 8px"
            />
            <a-icon
              v-if="dynamicValidateForm.domains.length > 1"
              :disabled="dynamicValidateForm.domains.length === 1"
              class="dynamic-delete-button"
              type="minus-circle-o"
              @click="removeDomain(domain)"
            />
          </a-form-model-item>
        </a-form-model>
      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction } from '@/api/manage'

export default {
  name: 'AgreementModal',
  data() {
    return {
      title: '补充协议',
      visible: false,
      onEdit : false,
      editId: '',
      model: {},
      saleSource: [],
      SaleInfosLike: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/sale/cxmSaleBaseInfo/addBaseInfo',
        edit: '/sale/cxmSaleBaseInfo/editBaseInfo'
      },
      showDing: false,
      showEnterpriseUscc: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 }
        }
      },
      dynamicValidateForm: {
        domains: [
          {
            value: '',
            key: Date.now()
          }
        ]
      }
    }
  },
  created() {
  },
  methods: {
    changeDepositNotes(val) {
      if (val == '不可退') {
        this.showDing = true
      } else {
        this.showDing = false
      }
    },
    add() {
      const that = this
      that.edit({})
    },
    edit(record) {
      console.log(record)
      this.form.resetFields()
      this.editId = record.id
      this.dynamicValidateForm.domains[0].value = record.name
      this.visible = true
      if(record.length){
        this.onEdit = true
      }
      this.$nextTick(() => {
        this.form.setFieldsValue({})
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.onEdit = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let model = {
            id: '',
            name: '',
          }
          if (this.onEdit == false) {
            httpurl += this.url.add
            model.name = this.dynamicValidateForm.domains[0].value
            httpAction(httpurl, { name: model.name, dataType: 10 }, 'post')
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.confirmLoading = false
                that.close()
              })
          } else if (this.onEdit == true) {
            httpurl += this.url.edit
            model.id = this.editId
            model.name = this.dynamicValidateForm.domains[0].value
            httpAction(httpurl, { id: model.id, name: model.name, dataType: 10 }, 'post')
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.confirmLoading = false
                that.close()
              })
          }
        }
      })
    },
    handleCancel() {
      this.close()
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain(item) {
      let index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      })
    }
  }
}
</script>

<style scoped>

</style>